/*
 * Copyright 2025 The Pigweed Authors
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

.container {
  width: 100%;
  box-sizing: border-box;
}

.row {
  display: flex;
  width: 100%;
  box-sizing: border-box;
}

.row div:first-child {
  flex: 1;
  padding: 8px;
  box-sizing: border-box;
  min-width: 0;
  text-wrap: balance;
}

.row div:last-child {
  white-space: nowrap;
  padding: 8px;
  box-sizing: border-box;
}

.row div sub {
  word-wrap: break-word;
  font-family: monospace;
}

.welcome-message {
  padding: 1em;
  border: 1px solid var(--vscode-editorWidget-border);
  border-radius: 4px;
  margin-top: 1em;
  margin-bottom: 1em;
}

.welcome-message h3 {
  margin-top: 0;
  font-size: 1.5em;
}

.welcome-message code {
  background: #fb71fe;
  color: #000;
}

.welcome-message h3 svg {
  height: 1.5em;
}

.welcome-sub-message {
  line-height: 1.4em;
}
.pigweed-pink {
  color: #fb71fe;
}

@font-face {
  font-family: 'codicon';
  src: url('@vscode/codicons/dist/codicon.ttf') format('truetype');
}

.codicon[class*='codicon-'] {
  font: normal normal normal 16px/1 codicon;
  display: inline-block;
  text-decoration: none;
  text-rendering: auto;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.codicon-chevron-right:before {
  content: '\eab6';
}
.codicon-book:before {
  content: '\eaa4';
}
.codicon-bug:before {
  content: '\eaaf';
}
.codicon-notebook:before {
  content: '\ebaf';
}

/* Add new styles for the toggle button group here or in the separate CSS file */
.toggle-button-group {
  display: block; /* Changed from flex to block for stacking */
  width: 100%;
  margin-top: 8px;
  margin-bottom: 8px;
}

.toggle-button {
  width: 100%; /* Make button full width */
  padding: 10px;
  text-align: left;
  border: 2px solid
    var(--vscode-button-border, var(--vscode-contrastBorder, transparent));
  background-color: transparent;
  color: var(--vscode-editor-foreground);
  cursor: pointer;
  font-size: var(--vscode-font-size, 13px);
  line-height: 1.5;
  transition:
    background-color 0.1s ease-in-out,
    color 0.1s ease-in-out,
    border-color 0.1s ease-in-out;
  box-sizing: border-box;
  border-radius: var(
    --vscode-button-border-radius,
    4px
  ); /* Rounded corners on all sides */
  margin-bottom: 8px; /* Space between stacked buttons */
  opacity: 0.8;
}

.toggle-button:last-child {
  margin-bottom: 0; /* No margin for the last button in the group */
}

.toggle-button:hover {
  background-color: var(--vscode-button-secondaryHoverBackground, #4a4a4a);
}

.toggle-button.active {
  border-color: var(--vscode-button-background, #0e639c);
  opacity: 1;
}

/* Ensure buttons in rows still look good if needed for other buttons */
.vscode-button {
  background-color: var(--vscode-button-background);
  color: var(--vscode-button-foreground);
  border: 1px solid var(--vscode-button-border, transparent);
  padding: 4px 10px;
  border-radius: var(--vscode-button-border-radius, 4px);
  cursor: pointer;
}
.vscode-button:hover {
  background-color: var(--vscode-button-hoverBackground);
}

.input-button-row {
  display: flex;
  align-items: stretch;
  margin-top: 8px;
  width: 100%;
  box-sizing: border-box;
}

.input-button-row .prefix {
  padding: 4px 0 4px 8px;
  background-color: var(--vscode-input-background);
  color: var(--vscode-descriptionForeground);
  border: 1px solid var(--vscode-input-border);
  border-right: none;
  border-radius: 4px 0 0 4px;
  white-space: nowrap;
  user-select: none;
  display: flex;
  align-items: center;
}

.input-button-row input.vscode-input {
  flex-grow: 1;
  background-color: var(--vscode-input-background);
  color: var(--vscode-input-foreground);
  border: 1px solid var(--vscode-input-border);
  border-left: none;
  border-radius: 0 4px 4px 0;
  padding: 3px 8px 4px 8px;
  outline: none;
  min-width: 100px;

  font-size: var(--vscode-font-size);
  font-family: var(--vscode-font-family);
  box-sizing: border-box;
  height: auto;
}

.input-button-row button.vscode-button {
  border-radius: var(--vscode-button-border-radius, 4px);
  margin-left: 8px;
  align-self: center;
}

.input-button-row:focus-within .prefix {
  border-color: var(--vscode-focusBorder);
  border-right: none;
}

.input-button-row input.vscode-input:focus {
  border-color: var(--vscode-focusBorder);
  border-left: none;
}

.input-button-row:has(input.vscode-input:disabled) .prefix {
  opacity: 0.6;
  cursor: not-allowed;
}

.input-button-row input.vscode-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.input-button-row button.vscode-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.input-button-row .input-button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -3px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.1rem;
}

.link-row {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.link-row > span {
  display: flex;
  padding: 0.5em 1em;
}

.link-row:hover {
  background-color: var(--vscode-list-hoverBackground);
}
.link-row i {
  margin-right: 10px;
  padding: 0px;
}

/* New styles for Code Intelligence Status */
.code-intelligence-status-card {
  border: 1px solid var(--vscode-editorWidget-border);
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 1em;
}

.code-intelligence-status-card h3 {
  margin-top: 0;
  font-size: 1.2em; /* Slightly smaller than welcome message */
}

.code-intelligence-status-card .description {
  font-size: 0.9em;
  margin-bottom: 1em;
}

.code-intelligence-status-card a {
  color: var(--vscode-textLink-foreground);
  text-decoration: none;
}

.code-intelligence-status-card a:hover {
  text-decoration: underline;
}

.status-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: bold;
  margin-bottom: 1em;
}

.status-line.status-success {
  color: var(--vscode-testing-iconPassed);
}

.status-line.status-error {
  color: var(--vscode-testing-iconFailed);
}

.status-line.status-info {
  color: var(--vscode-testing-iconQueued);
}

.status-steps {
  list-style-type: decimal;
  padding-left: 20px;
  margin: 0;
}

.status-steps li {
  margin-bottom: 1em;
}

.status-steps li:last-child {
  margin-bottom: 0;
}

.status-steps .step-detail {
  font-size: 0.9em;
  color: var(--vscode-descriptionForeground);
  margin-top: 4px;
}

.status-steps code {
  background-color: var(--vscode-textBlockQuote-background);
  padding: 2px 4px;
  border-radius: 3px;
  font-family: var(--vscode-editor-font-family, monospace);
}

.you-are-here {
  margin-left: 8px;
  font-weight: normal;
}

.status-steps li.step-dimmed {
  opacity: 0.3;
}

.vscode-select {
  position: relative;
  width: 100%;
}

.vscode-select select {
  appearance: none;
  background-color: var(--vscode-settings-dropdownBackground);
  border-color: var(--vscode-settings-dropdownBorder);
  border-radius: 2px;
  border-style: solid;
  border-width: 1px;
  color: var(--vscode-settings-dropdownForeground);
  cursor: pointer;
  font-family: var(--vscode-font-family);
  font-size: var(--vscode-font-size);
  font-weight: var(--vscode-font-weight);
  line-height: 18px;
  margin: 0;
  padding: 3px 4px;
  width: 100%;
}

.vscode-select select:focus {
  border-color: var(--vscode-focusBorder);
  outline: none;
}

.vscode-select.invalid select,
.vscode-select select:invalid {
  background-color: var(--vscode-inputValidation-errorBackground);
  border-color: var(--vscode-inputValidation-errorBorder, #be1100);
}

.vscode-select option {
  cursor: pointer;
  font-family: var(--vscode-font-family);
  font-size: var(--vscode-font-size);
  font-weight: var(--vscode-font-weight);
}

.vscode-select .chevron-icon {
  color: var(--vscode-foreground);
  display: block;
  height: 14px;
  pointer-events: none;
  position: absolute;
  right: 8px;
  top: 5px;
  width: 14px;
}

.vscode-select select[multiple] {
  padding: 0;
}

.vscode-select select[multiple] + .chevron-icon {
  display: none;
}

.vscode-select select[multiple] option {
  color: var(--vscode-foreground);
  cursor: pointer;
  font-family: var(--vscode-font-family);
  font-size: var(--vscode-font-size);
  font-weight: var(--vscode-font-weight);
  line-height: 18px;
  padding: 2px 3px;
}

.vscode-select select[multiple] option:hover {
  background-color: var(--vscode-list-hoverBackground);
  color: var(--vscode-list-hoverForeground);
}

.vscode-select select[multiple] option:checked {
  background-color: var(--vscode-list-hoverBackground) !important;
  color: var(--vscode-list-hoverForeground) !important;
}

.vscode-select select[multiple]:focus option:checked {
  background-color: var(--vscode-list-activeSelectionBackground) !important;
  color: var(--vscode-list-activeSelectionForeground) !important;
}
